<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
        <el-form-item prop="params.memberId">
          <el-input
            v-model="queryParams.params.memberId"
            class="filter-item"
            clearable
            placeholder="会员ID"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.memberPhone">
          <el-input
            v-model="queryParams.params.memberPhone"
            class="filter-item"
            clearable
            placeholder="会员电话"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.cardName">
          <el-input
            v-model="queryParams.params.cardName"
            class="filter-item"
            clearable
            placeholder="卡名称"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.cardNo">
          <el-input
            v-model="queryParams.params.cardNo"
            class="filter-item"
            clearable
            placeholder="卡号"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.cardType">
          <el-select v-model="queryParams.params.cardType" clearable placeholder="卡类型">
            <el-option v-for="item in cardTypeList" :key="item.id" :label="item.value" :value="item .code" />
          </el-select>
        </el-form-item>
        <el-form-item prop="params.cardStatus">
          <el-select v-model="queryParams.params.cardStatus" clearable placeholder="卡状态">
            <el-option v-for="item in cardStatusList" :key="item.id" :label="item.value" :value="item .code" />
          </el-select>
        </el-form-item>
        <el-form-item prop="params.balanceMin">
          <el-input
            v-model="queryParams.params.balanceMin"
            class="filter-item"
            clearable
            placeholder="卡余额<="
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="params.balanceMax">
          <el-input
            v-model="queryParams.params.balanceMax"
            class="filter-item"
            clearable
            placeholder="卡余额>"
            style="width: 150px;"
          />
        </el-form-item>
        <el-form-item prop="buildStartDate">
          <el-date-picker
            v-model="queryTime"
            end-placeholder="建卡结束日期"
            range-separator="至"
            start-placeholder="建卡开始日期"
            style="width: 100%"
            type="datetimerange"
            @change="queryTimeChangeHandler"
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-button
          v-permission="['/card/master/search']"
          v-waves
          class="filter-item"
          icon="el-icon-search"
          size="small"
          style="margin-left: 10px;"
          type="primary"
          @click="getDataList"
        >查询
        </el-button>
        <el-button
          v-permission="['/card/master/search']"
          v-waves
          class="filter-item"
          icon="el-icon-refresh"
          size="small"
          type="primary"
          @click="resetQueryForm"
        >重置
        </el-button>
        <el-button
          v-permission="['/card/master/update']"
          v-waves
          class="filter-item"
          icon="el-icon-s-help"
          size="small"
          type="success"
          @click="handleOpenDialog('recharge')"
        >储值卡充值
        </el-button>
      </el-form>
    </div>
    <!-- 数据表格 -->
    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      border
      data-list
      fit
      highlight-current-row
      size="small"
      style="width: 100%;"
      @sort-change="handleSortChange"
    >
      <el-table-column :index="shownIndex" align="center" fixed label="序号" type="index" />
      <el-table-column align="center" label="卡UID" prop="uid" show-overflow-tooltip />
      <el-table-column align="center" label="会员ID" prop="memberId" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="会员电话" prop="memberPhone" show-overflow-tooltip />
      <el-table-column align="center" label="卡号" prop="cardNo" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="卡类型" prop="cardTypeName" show-overflow-tooltip />
      <el-table-column align="center" label="卡状态" prop="cardStatusName" show-overflow-tooltip />
      <el-table-column align="center" label="卡名称" prop="cardName" show-overflow-tooltip />
      <el-table-column align="center" label="卡余额" prop="balance" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="建卡日期" prop="buildDate" show-overflow-tooltip sortable="custom" />
      <el-table-column align="center" label="活动UID" prop="actUid" show-overflow-tooltip />
      <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip />
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250" />
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="queryParams.page"
        :page-size="queryParams.size"
        :page-sizes="[10,20,30, 50]"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 储值卡查询对话框 -->
    <el-dialog
      v-loading="dialogLoading"
      :close-on-click-modal="false"
      :title="dialogTitleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      element-loading-text="查询中"
    >
      <div class="filter-container">
        <el-form
          label-position="right"
          label-width="100px"
          size="small"
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input
                v-model="cardNo"
                class="filter-item"
                clearable
                placeholder="储值卡卡号"
              />
            </el-col>
            <el-col :span="14">
              <el-button
                v-waves
                class="filter-item"
                icon="el-icon-search"
                size="small"
                style="margin-left: 10px;"
                type="primary"
                @click="getCardData"
              >查询
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        height="250"
        style="width: 100%"
      >
        <el-table-column
          label="会员ID"
          prop="memberId"
        />
        <el-table-column
          label="卡编号"
          prop="cardNo"
        />
        <el-table-column
          label="卡类型"
          prop="cardTypeName"
        />
        <el-table-column
          label="卡状态"
          prop="cardStatusName"
        />
        <el-table-column
          label="卡余额"
          prop="balance"
        />
        <el-table-column>
          <template slot-scope="scope">
            <el-link type="primary" @click="handleRecharge(scope.row)">操作</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--储值卡充值对话框-->
    <el-dialog
      v-loading="dialogLoading"
      :close-on-click-modal="false"
      :title="dialogTitleMap[dialogStatus]"
      :visible.sync="rechargeVisible"
      width="25%"
    >
      <div class="filter-container">
        <el-form
          ref="rechargeData"
          :model="rechargeData"
          label-position="right"
          label-width="100px"
          size="small"
        >
          <el-form-item label="卡号：">
            <el-input v-model="rechargeData.cardNo" placeholder="卡号" />
          </el-form-item>
          <el-form-item label="充值类型：">
            <el-select v-model="rechargeData.rechargeType" clearable placeholder="充值类型">
              <el-option v-for="item in rechargeTypeList" :key="item.id" :label="item.value" :value="item .code" />
            </el-select>
          </el-form-item>
          <el-form-item label="充值金额：">
            <el-input v-model="rechargeData.rechargeAmount" placeholder="充值金额" />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="rechargeData.remark"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="备注"
              type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="cardRecharge">立即充值</el-button>
            <el-button @click="rechargeVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { fetchList, findByObject } from '@/api/card/master'
import { typeList } from '@/api/system/dict'
import { cardRecharge } from '@/api/card/recharge'

export default {
  name: 'Master',
  data() {
    return {
      total: 0,
      dataList: [],
      tableData: [],
      cardTypeList: [],
      cardStatusList: [],
      queryTime: [],
      rechargeTypeList: [],
      dataListLoading: false,
      dialogFormVisible: false,
      dialogLoading: false,
      rechargeVisible: false,
      dialogStatus: '',
      cardNo: '',
      dialogTitleMap: {
        add: '新增',
        update: '编辑',
        recharge: '储值卡充值'
      },
      queryParams: {
        page: 1,
        size: 10,
        params: {
          cardNo: '',
          cardType: '',
          cardStatus: '',
          cardName: '',
          balanceMin: '',
          balanceMax: '',
          buildStartDate: '',
          buildEndDate: '',
          memberId: '',
          memberPhone: ''
        }
      },
      rechargeData: {
        cardId: '',
        cardNo: '',
        rechargeType: '',
        rechargeAmount: 0,
        giftAmount: 0,
        remark: ''
      }
    }
  },
  mounted() {
    typeList({ type: 'cardType' }).then(res => {
      this.cardTypeList = res.data
    })
    typeList({ type: 'cardStatus' }).then(res => {
      this.cardStatusList = res.data
    })
    typeList({ type: 'rechargeType' }).then(res => {
      this.rechargeTypeList = res.data
    })
    this.getDataList()
  },
  methods: {
    shownIndex(index) {
      return (this.queryParams.page - 1) * this.queryParams.size + index + 1
    },
    handleSortChange(data) {
      console.log('handleSortChange')
      console.log(data)
      if (data.order) {
        if (data.order.indexOf('asc') > -1) {
          this.queryParams.sortOrder = 'asc'
        } else {
          this.queryParams.sortOrder = 'desc'
        }
        this.queryParams.sortName = data.prop
      }
      console.log(this.queryParams)
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = false
      fetchList(this.queryParams)
        .then(res => {
          console.log(res)
          this.dataList = res.data.records
          this.total = res.data.total
          this.dataListLoading = false
        })
        .catch(err => {
          console.log(err)
          this.dataLoading = false
        })
    },
    getCardData() {
      if (this.cardNo === '') {
        this.$message.error('储值卡卡号不能为空')
        return
      }
      findByObject({ 'cardNo': this.cardNo }).then(res => {
        console.log(res)
        this.tableData = res.data
      }).catch(err => {
        this.$message.error(err || '找不到此卡')
        console.log(err || '找不到此卡')
      })
    },
    handleOpenDialog(type, rowData) {
      this.dialogStatus = type
      this.dialogFormVisible = true
      if (type === 'update') {
        this.dataForm = JSON.parse(JSON.stringify(rowData))
      }
    },
    resetQueryForm() {
      this.$refs['queryForm'].resetFields()
      this.queryParams.page = 1
      this.queryTime = []
      this.queryParams.params.buildStartDate = ''
      this.queryParams.params.buildEndDate = ''
      this.cardNo = ''
      this.getDataList()
    },
    resetDataForm() {
      if (this.$refs['rechargeData']) {
        // 由于编辑数据的时候会导致表单对象的初始化值发生变更，所以在重置表单前先手动重置表单对象的值
        this.rechargeData = {
          cardId: '',
          cardNo: '',
          rechargeType: '',
          rechargeAmount: 0,
          giftAmount: 0,
          remark: ''
        }
        this.$refs['rechargeData'].resetFields()
      }
    },
    handleSizeChange(size) {
      this.queryParams.size = size
      this.getDataList()
    },
    handleCurrentChange(page) {
      this.queryParams.page = page
      this.getDataList()
    },
    handleRecharge(rowData) {
      this.rechargeData.cardNo = rowData.cardNo
      this.rechargeData.cardId = rowData.id
      this.rechargeVisible = true
    },
    queryTimeChangeHandler(value) {
      if (value) {
        this.queryParams.params.buildStartDate = value[0]
        this.queryParams.params.buildEndDate = value[1]
      }
    },
    cardRecharge() {
      cardRecharge(this.rechargeData).then(res => {
        this.rechargeVisible = false
        this.dialogFormVisible = false
        this.resetDataForm()
        this.resetQueryForm()
      })
    }
  }
}
</script>
<style scoped>
.el-form .el-select {
  width: 100%;
}
</style>
